<template>
  <div class="cube_content">
    <el-row>
      <el-col :span="24">Cube基础信息设计
        <el-button type="success" size="mini" style="display:inline-block;float: right;margin-right: 20px;">调优
        </el-button>
      </el-col>
    </el-row>
    <div class="info-text">
      <el-row>
        <el-col :span="6">创建时间：<span v-if="cubeInfo">{{cubeInfo.createTime | formatDate}}</span></el-col>
        <el-col :span="6">查询次数：<span v-if="cubeInfo">{{cubeInfo.queryCount}}</span></el-col>
        <el-col :span="6">慢查询：<span v-if="cubeInfo">{{cubeInfo.slowQueryCount}}</span></el-col>
        <el-col :span="6">cuboids：<span v-if="cubeInfo">{{cubeInfo.cuboids}}</span></el-col>
      </el-row>
    </div>
    <el-menu default-active="1" active-text-color="#42b983" background-color="#F4F6F9"  mode="horizontal">
      <el-menu-item index="1">模型设计</el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="24">
        <div class="all_box_items">
          <el-row>
            <el-col :span="12">
              <div class="item-left" v-if="model">
                <RelationChart :chart-data="model"  theme="shine"></RelationChart>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex_line"></div>
              <div class="model_item_flex">
                <p>模型维度</p>
                <div class="module_item" v-if="design">
                  <span  v-for="item in design.dimensions" class="unit_items unit_items_default">{{item.name}}</span>
                </div>
              </div>

              <div class="model_item_flex">
                <p>模型度量</p>
                <div class="module_item" v-if="design">
                  <span  v-for="item in design.measures" class="unit_items unit_items_default" v-if="item.fnParameterValue.indexOf('.') >= 0">{{item.fnParameterValue | subString}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-menu default-active="1" active-text-color="#42b983" background-color="#F4F6F9"  mode="horizontal" style="margin-bottom: 15px;">
      <el-menu-item index="1">维度参数设计</el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="24">
        <div class="all_box_special">
          <div class="column_title">维度</div>
          <div class="item_inner_box" v-if="design">
            <span class="unit_items" style="background-color: #cee8ff" v-for="item in design.dimensions">{{item.name}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="all_box_special">
          <div class="column_title">聚合组</div>
          <el-menu default-active="1" active-text-color="#409eff"  mode="horizontal" style="padding-left: 10px;">
            <el-menu-item index="1">聚合组1</el-menu-item>
          </el-menu>
          <template v-if="design">
            <div class="item_inner_box"  v-for="group in design.groups">
              <span class="unit_items unit_items_default" v-for="item in group.includes">{{item}}</span>
            </div>
          </template>
          <el-row>
            <el-col :span="24">
              <span class="juhe_title">强制维度：</span>
              <div v-if="design">
                <template  v-for="group in design.groups">
                  <span class="unit_items unit_items_default" v-for="item in group.mandatoryDims">{{item}}</span>
                </template>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span class="juhe_title">联合维度：</span>
              <div v-if="design">
                <template v-for="group in design.groups">
                  <span class="unit_items unit_items_default" v-for="item in group.jointDims">{{item}}</span>
                </template>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span class="juhe_title">层级维度：</span>
              <div v-if="design">
                <template v-for="group in design.groups">
                  <span class="unit_items unit_items_default" v-for="item in group.hierarchyDims">{{item}}</span>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="all_box_special">
          <div class="column_title">度量</div>
          <div class="roc-wrap" v-if="design">
            <el-table
              :data="design.measures"
              :header-cell-style="{background:'#ebeef5',border:'none'}"
              border
              style="text-align: center;">
              <el-table-column
                align="center"
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="fnExpression"
                label="表达式">
              </el-table-column>
              <el-table-column
                align="center"
                prop="fnParameterType"
                label="参数">
              </el-table-column>
              <el-table-column
                align="center"
                prop="fnReturnType"
                label="数值类型">
              </el-table-column>
              <el-table-column
                align="center"
                prop="columnFamily"
                label="列簇">
              </el-table-column>
            </el-table>
          </div>

        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="all_box_special">
          <div class="column_title">分区</div>
          <div style="height: 250px">
            <div class="chart" v-if="segments">
              <TwoYAxisBarChart :chart-data="segments" :height="height" theme="shine"></TwoYAxisBarChart>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import cubeApi from '@/api/kylin/cube'
  import TwoYAxisBarChart from './components/TwoYAxisBarChart'
  import RelationChart from './components/RelationChart'
  export default {
    name: 'cubeInfo',
    components: {
      TwoYAxisBarChart,
      RelationChart
    },
    data() {
      return {
        id: this.$route.query.id,
        height: '200px',
        cubeInfo: null,
        model: null,
        design: null,
        segments: null,
        queryDataGrid: null
      }
    },
    filters: {
      formatDate: function(value) {
        const date = new Date(value)
        const y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let m = date.getMinutes()
        m = m < 10 ? ('0' + m) : m
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      },
      subString: function(value) {
        return value.substring(value.lastIndexOf('.') + 1, value.length)
      }
    },
    created: function() {
      cubeApi.get(this.id).then(resp => {
        this.cubeInfo = resp.data
      })
      cubeApi.model(this.id).then(resp => {
        this.model = resp.data
      })
      cubeApi.design(this.id).then(resp => {
        this.design = resp.data
      })
      cubeApi.segments(this.id).then(resp => {
        this.segments = resp.data
      })
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .cube_content{
      background: #F4F6F9;
      padding: 20px;
      .info-text{
        width: 100%;
        font-size: 14px;
        color: #6D6D6D;
        overflow: hidden;
        padding: 0 12px;
        margin: 15px 0;
      }
      .el-menu{
        border:none;
      }
      .all_box_items {
        height: 272px;
        background: #FFFFFF;
        border: 1px solid #E8E8E8;
        border-radius: 5px;
        margin-top: 15px;
      .item-left{
        position: relative;
        overflow: hidden;
       /* width: 800px;*/
        height: 270px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
        cursor: default;
      }
    .flex_line {
      width: 2px;
      height: 247px;
      background: #F0F0F0;
      margin-top: 12px;
      float: left;
    }
    .model_item_flex {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      padding-left: 14px;
      font-size: 12px;
      color: #3A3A3A;
      padding-top: 10px;
      float: left;
    max-width:96%;
    .module_item {
      height: 85px;
      overflow-y: auto;
    }
    }
    }
    .unit_items {
      display: inline-block;
      padding: 0 13px;
      height: 28px;
      line-height: 28px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #3A3A3A;
      border-radius: 3px;
      margin: 10px;
    }
    .unit_items_default {
      background-color: #cadaff;
    }
    .all_box_special {
      background: #FFFFFF;
      border: 1px solid #E8E8E8;
      border-radius: 5px;
      margin-bottom: 15px;
    .column_title {
      font-size: 14px;
      color: #3A3A3A;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
      font-family: PingFangSC-Regular;
    }
    .juhe_title {
      display: inline-block;
      line-height: 46px;
      margin-left: 10px;
      font-size: 14px;
      color: #3A3A3A;
    }
    .roc-wrap {
      padding: 10px;
    }
    .item_inner_box {
      padding: 0 15px;
    }
    .chart {
      width: 86%;
      margin: 0 auto;
    }
    }
    }
</style>
